<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>商品管理</title>
    <meta name="decorator" content="default"/>
    <script>
        function deletAttr(obj){
            if(obj!=0){
                $("div#"+obj).remove();
            }else{
                alert("必须保留一个！");
            }
        }
        $(function() {
        //判断代理商是否是这个区域唯一的
        $("#barcode").blur(function() {
           // var barcode=$("#barcode").val();
            $.ajax({
                type : "POST",
                url : "${ctx}/sys/overseas/checkBarcode",
                data : "barcode="+barcode,
                success : function(date) {
                    if(date=='0'){
                        document.getElementById("agent").innerHTML="*";
                    }else {
                        location.href="${ctx}/sys/overseas/form?id="+date;

                    }
                }

            });

        });
        });
    </script>
</head>
<body>
<ul class="nav nav-tabs">
    <li><a href="${ctx}/sys/overseas/showOverSeasProductList">海外商品列表</a></li>
    <li class="active"><a href="${ctx}/sys/overseas/form?id=${tbProduct.id}">海外商品添加</a></li>
</ul>
<br/>
<form:form id="inputForm" modelAttribute="tbProduct" action="${ctx}/sys/overseas/productEdit" method="post"
           class="form-horizontal" enctype="multipart/form-data">
    <form:hidden path="id"/>
    <sys:message content="${message}"/>
    <div class="control-group">
        <label class="control-label">类别:</label>
        <div class="controls">
            <sys:treeselect id="categoryId" name="categoryId" value="${category.id}" labelName="parent.name"
                            labelValue="${category.name}" notAllowSelectRoot="true" notAllowSelectParent="true"
                            title="菜单" url="/sys/category/treeData2" extId="${category.id}" cssClass="required"/>
            <span class="help-inline"><font color="red">*</font> </span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">条形码:</label>
        <div class="controls">
            <form:input path="barcode" id="barcode" htmlEscape="false" maxlength="50" class="required"/>
            <span class="help-inline"><font color="red" id="agent">*</font> </span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">商品名称:</label>
        <div class="controls">
            <form:input path="title" id="title" htmlEscape="false" maxlength="50" class="required"/>
            <span class="help-inline"><font color="red">*</font> </span>
        </div>
    </div>
   <%-- <div class="control-group">
        <label class="control-label">价格:</label>
        <div class="controls">
            <form:input path="wholesalePrice" type="number" min="0" id="wholesalePrice" htmlEscape="false" maxlength="50" class="required"/>
            <span class="help-inline"><font color="red">*</font> </span>
        </div>
    </div>--%>
    <div class="control-group">
        <label class="control-label">排序:</label>
        <div class="controls">
            <form:input path="proSort" id="proSort" htmlEscape="false" maxlength="50" class="required"/>
            <input type="hidden" id="productAttrLength" name ="productAttrLength" value="${listLength}"/>

            <span class="help-inline"><font color="red">*</font> </span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">商品单位:</label>
        <div  class="controls">
            <form:input path="size" id="size" htmlEscape="false" maxlength="50" class="required"/>
            <span class="help-inline"><font color="red">*</font> </span>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">添加商品属性:</label>
        <div class="controls">
            <input type="button" id="addAttribute" name="addAttribute" value="添加"/>
            <span class="help-inline"><font color="red">*</font> </span>
        </div>
    </div>


    <div id="control_group_" class="control-group">
        <c:choose>
            <c:when test="${tbProduct.id!=null}">
                <c:forEach items="${list}" var="group" varStatus="st">
                    <div class="controls" id="${st.index}">
                        <input type="text" placeholder="属性值，例如：红色XL" name="productAttrGroup[${st.index}].sku" value="${group.color}" class="required"/>
                        <input type="number" min="0"  class="required" placeholder="价格" name="productAttrGroup[${st.index}].price" value="${group.price}"/>
                        <input type="text"  class="required"  placeholder="货号" name="productAttrGroup[${st.index}].unit" value="${group.productSize}"/>
                        <input type="button" onclick="deletAttr(${st.index})" value="删除"><br/><br/>
                    </div>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <div class="controls" >
                    <input type="text" placeholder="属性值，例如：红色XL" name="productAttrGroup[0].sku" value=""  class="required"/>
                    <input type="number" min="0"  class="required" placeholder="价格" name="productAttrGroup[0].price" value="" />
                    <input type="text"  class="required"  placeholder="货号" name="productAttrGroup[0].unit" value=""/><br/><br/>
                </div>
            </c:otherwise>
        </c:choose>
    </div>

    <div class="control-group">
        <label id="container" class="control-label"><a class="btn btn-default btn-lg " id="pickfiles" href="#">
            <i class="glyphicon glyphicon-plus"></i>
            <span>选择文件</span>
        </a>:</label>
        <input type="hidden" id="imgs3" value="2">
        <div class="controls">
            <ol id="nameImagePreview">
                <c:forEach items="${tbAttachments}" var="img">
                    <li><img src="${img.imageUrl}"
                             url="${img.imageUrl}"
                             style="max-width:100px;max-height:100px;_height:100px;border:0;padding:3px;">
                        <input type="hidden" name="uploadUrl" value="${img.imageUrl}" class="required">
                        &nbsp;&nbsp;
                        <a href="javascript:void(0)" name="deleteImg">×</a>
                        <input type="text" value="${img.imageUrl}" class="input-text form-control"/>
                    </li>
                </c:forEach>
            </ol>
            <span class="help-inline"><font color="red" id="imgs">*</font> </span>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">编辑商品详情:</label>
        <div class="controls">
            <textarea id="fullText" name="productDesc">${tbProduct.productDesc}</textarea>
        </div>
    </div>
    <div class="form-actions"><%--onclick="uploadPhoto();"--%>
            <input id="btnSubmit" class="btn btn-primary" type="submit"
                   value="保 存"/>
        <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
    </div>
</form:form>

<script type="text/javascript" src="${ctxStatic}/common/jquery-2.0.0.min.js"></script>

<script type="text/javascript" src="${ctxStatic}/bower_components/moxie.js"></script>
<script type="text/javascript" src="${ctxStatic}/bower_components/plupload.dev.js"></script>
<%--<script type="text/javascript" src="/static/bower_components/plupload/js/plupload.full.min.js"></script>--%>
<script type="text/javascript" src="${ctxStatic}/bower_components/qiniu.js"></script>
<script type="text/javascript" src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/ckeditor/ckeditor.js"></script>
<link href="${ctxStatic}/common/mycss.css" rel="stylesheet" type="css">
<script>
    /*global Qiniu */
    /*global plupload */
    /*global FileProgress */
    /*global hljs */


    $(function () {
        var uploader = Qiniu.uploader({
            runtimes: 'html5,flash,html4',
            browse_button: 'pickfiles',
            container: 'container',
            drop_element: 'container',
            max_file_size: '1000mb',
            flash_swf_url: 'bower_components/plupload/js/Moxie.swf',
            dragdrop: true,
            chunk_size: '4mb',
            multi_selection: !(mOxie.Env.OS.toLowerCase() === "ios"),
            uptoken_url: '/a/qiniu/upload/token',
            domain: "oframjnn6.bkt.clouddn.com",
            get_new_uptoken: false,
            auto_start: true,
            log_level: 5,
            unique_names: true,
            init: {
                'FilesAdded': function (up, files) {
                    plupload.each(files, function (file) {
                    });
                },
                'BeforeUpload': function (up, file) {
                },
                'UploadProgress': function (up, file) {
                    console.log(up);
                },
                'UploadComplete': function () {
                },
                'FileUploaded': function (up, file, info) {
                },
                'Error': function (up, err, errTip) {

                }
            }
        });

        uploader.bind('FileUploaded', function (up, file, info) {
            $("#imgs3").remove();
            console.log("resp_URL : " + JSON.parse(info.response).key);
            var _url = 'http://oframjnn6.bkt.clouddn.com/' + JSON.parse(info.response).key;
            var _html = '<li><img src="'+_url+'" ' +
                    'url="'+_url+'" ' +
                    'style="max-width:100px;max-height:100px;_height:100px;border:0;padding:3px;"> ' +
                    '<input type="hidden" name="uploadUrl" value="'+_url+'"> ' +
                    '&nbsp;&nbsp;<input type="hidden" id="imgs3" value="2"> ' +
                    '<a href="javascript:void(0)" name="deleteImg">×</a> ' +
                    '<input type="text" value="'+_url+'" class="input-text form-control"/></li>';
            console.log(_html);
            $("#nameImagePreview").append(_html);
            document.getElementById("imgs").innerHTML="*";
            document.getElementById("imgs").setAttribute("style", "color:red;");
        });

    });

</script>

<script type="text/javascript">
    $('#btnSubmit').click(function () {
        var imgs3=$("#imgs3").val();
          if(imgs3==undefined){
            document.getElementById("imgs").innerHTML="商品图片必须选择";
            document.getElementById("imgs").setAttribute("style", "color:red;");
        }else{
            document.getElementById("imgs").innerHTML="*";
            document.getElementById("imgs").setAttribute("style", "color:red;");
        }
        $("#barcode").focus();
        $("#inputForm").validate({
            submitHandler: function (form) {
                imgs3=$("#imgs3").val();
                if(imgs3==2){
                    loading('正在提交，请稍等...');
                    form.submit();
                }

            },
            errorContainer: "#messageBox",
            errorPlacement: function (error, element) {
                $("#messageBox").text("输入有误，请先更正。");
                if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
                    error.appendTo(element.parent().parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });

    });

    $(document).ready(function () {

        CKEDITOR.replace("fullText");

        $(document).on("click", "A[name='deleteImg']", function () {
            $(this).parent().remove();
        });

        var i = ${productAttrs == null ? 0 : productAttrs};


        $("#value").focus();

        $(document).on("change", ":radio[name='isMaintainStoreNum']", function () {
            if ($(this).val() == 1) {
                $("#kucunID").show();
                $("#yujingID").show();
            } else {
                $("#kucunID").hide();
                $("#yujingID").hide();
            }
        });

        /*//添加商品属性
        $(document).on("click", "#addAttribute", function () {
            var option = $("#productAttributes");
            var formControl = $("#control_group_" + option.find(":selected").text());
            var checked = formControl.find(":checked");
            console.log(checked);


            var _obj = $(this);
            $.post("${ctx}/product/dict/tbProductAttributeDict/children?code=" + option.val(),
                    function (data) {
                        console.log(data);
                        if (data.length == 0) {
                            return false;
                        }
                        var _html = '';
                        for (var j = 0; j < data.length; j++, i++) {
                            var item = data[j];
                            _html += '<input type="checkbox" id="' + item.code + '_' + i + '" name="productAttr[' + i + '].productAttrValue" value="' + item.value + '" />' + item.option;
                            _html += '<input type="hidden"  name="productAttr[' + i + '].productAttr" value="' + item.code + '" />';
                            _html += '<input type="hidden"  name="productAttr[' + i + '].productAttrOption" value="' + item.option + '" />';
                        }

                        _html = '<div id="control_group_' + option.find(":selected").text() + '" class="control-group"><label class="control-label">'
                                + option.find(":selected").text()
                                + ':</label>'
                                + '<div class="controls">' +
                                _html
                                + '&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="deleteOption" value="删除"/></div></div>';

                        var item = option.find("option[value=" + option.val() + "]");
                        formControl.remove();
                        _obj.parents(".control-group").after(_html);
                        for (var item = 0; item < checked.length; item++) {
                            $(":checkbox[value=" + checked[item].value + "]").prop("checked", true);
                        }
                    });
        });
*/
        //添加商品属性
        var productAttr=1;
        $(document).on("click", "#addAttribute", function () {
            var grorpLength=$("#productAttrLength").val();
            if(grorpLength!=null&&grorpLength!=''&&productAttr==0){
                productAttr=parseInt(grorpLength);
            }
            var _html = '';
            _html +='<div class="controls" id="'+productAttr+'">';
            _html += '<input type="text" placeholder="属性值，例如：红色XL" name="productAttrGroup['+productAttr+'].sku" value="" class="required"/>';
            _html += ' <input type="number" min="0" class="required" placeholder="价格" name="productAttrGroup['+productAttr+'].price" value=""/>';
            _html += ' <input type="text" class="required"  placeholder="货号" name="productAttrGroup['+productAttr+'].unit" value=""/>';
            _html += '<input type="button" onclick="deletAttr('+productAttr+');" value="删除"><br/><br/>';
            _html +='</div>';
            var option=$("#control_group_").append(_html);
            productAttr++;
            $("#productAttrLength").val(productAttr);
        });

       /* //删除商品属性
        $(document).on("click", "input[name='aes"+productAttr+"']", function () {
            alert(1);
            var id='controls'+productAttr;
            alert(id);
            $(this).parents(".id").remove();
        });*/

        $(function(){
            $("input[type='button']").click(function() {
                $("div#test").remove();
            });
        });

    });


</script>
</body>
</html>
